<template>
  <div>
    <el-container class="container">
      <el-header class="w-screen bg-white border-b sticky top-0 z-40 flex justify-center items-center gap-2">
        <el-avatar class="flex justify-center items-center">
          logo
        </el-avatar>
        <div class="text-xl font-medium">
          肉品溯源系统
        </div>
      </el-header>

      <el-main class="main w-screen h-(screen-60) bg-white bg-opacity-80">
        <el-backtop
          target=".main"
          class="bottom-0"
          :right="20"
        >
          <i class="el-icon-caret-top" />
        </el-backtop>
        <div class="grid gap-y-4">
          <template v-if="trace.info">
            <div class="border-4 rounded-2xl border-blue-300 bg-white bg-opacity-50 p-4">
              <template v-if="Object.keys(trace.info).length === 2">
                <ul class="list-disc list-inside">
                  <li class="mb-2">
                    <span>产品：</span>
                    <el-tag effect="dark">
                      {{ trace.info.productModel.type }}
                    </el-tag>
                  </li>
                  <li class="mb-2">
                    <span>品种：</span>
                    <el-tag
                      effect="dark"
                      class="mr-2"
                      type="info"
                    >
                      {{ trace.info.animalModel.type }}
                    </el-tag>
                    <el-tag effect="dark">
                      {{ trace.info.animalModel.breed }}
                    </el-tag>
                  </li>
                  <li>
                    <span>检疫：</span>
                    <el-tag
                      effect="dark"
                      type="success"
                    >
                      合格
                    </el-tag>
                  </li>
                </ul>
              </template>
              <template v-else>
                <ul class="list-disc list-inside">
                  <li class="mb-2">
                    <span>品种：</span>
                    <el-tag
                      effect="dark"
                      class="mr-2"
                      type="info"
                    >
                      {{ trace.info.type }}
                    </el-tag>
                    <el-tag effect="dark">
                      {{ trace.info.breed }}
                    </el-tag>
                  </li>
                  <li>
                    <span>检疫：</span>
                    <el-tag
                      effect="dark"
                      type="success"
                    >
                      合格
                    </el-tag>
                  </li>
                </ul>
              </template>
            </div>
            <div>
              <div
                v-for="(record,idx) in trace.detail"
                :key="idx"
              >
                <div class="flex justify-start items-center gap-x-1">
                  <div class="h-3 w-3 rounded-full bg-indigo-300" />
                  <div class="h-1 w-3 bg-indigo-300 " />
                  <div class="tabular-nums text-yellow-600 font-bold">
                    {{ record.time }}
                  </div>
                  <div class="h-1 w-5 from-indigo-300 via-indigo-300 to-transparent bg-gradient-to-r flex-grow" />
                </div>

                <div class="flex">
                  <div class="w-1 ml-1 mr-3 bg-indigo-300" />
                  <div class="pt-3 pb-5">
                    <div>
                      到达 {{ record.ename }}
                      <el-tag
                        effect="dark"
                        type="warning"
                      >
                        {{ record.etype }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="text-center text-xl text-yellow-600">
              <div v-if="trace.state === 0">
                <i class="el-icon-loading" /> 加载中
              </div>
              <div v-else>
                暂无信息！
              </div>
            </div>
          </template>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="postcss">
 body{
    @apply bg-cover bg-center;
  }
</style>

<script>
import Hashids from 'hashids'

export default {
  props: {
    hash: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      hashids: new Hashids(),
      trace: {
        detail: undefined,
        info: undefined,
        state: 0
      }
    }
  },
  created () {
    const data = this.hashids.decode(this.hash)
    this.axios.get('/api/public/trace', {
      params: {
        gid: data[1],
        gtype: data[0]
      }
    }).then(function (r) {
      if (r.data.success) {
        this.trace.detail = r.data.detail
        this.trace.info = r.data.info
        console.log(r.data)
      }
      this.trace.state = 1
    }.bind(this))
  },
  methods: {

  }
}
</script>
